<template>
  <div class="search-peight">
    <head-bar type="1"></head-bar>
    <div class="content">
      <div class="left">
        <n-space>
          <n-input-group>
            <n-button circle class="title">矩阵搜索方法</n-button>
            <n-select
              class="select"
              v-model:value="select1"
              :options="items1"
            />
          </n-input-group>
        </n-space>
        <n-space>
          <n-input-group>
            <n-button circle class="title">矩阵元素所在域</n-button>
            <n-select
              class="select"
              v-model:value="select2"
              :options="items2"
            />
          </n-input-group>
        </n-space>
        <n-space>
          <n-input-group>
            <n-button circle class="title">矩阵异或数限制</n-button>
            <n-select
              class="select"
              v-model:value="select3"
              :options="items3"
              @update:value="filter"
            />
          </n-input-group>
        </n-space>
        <n-space justify="space-between">
          <n-button class="btn" @click="createM">生成矩阵</n-button>
          <n-button class="btn" @click="$router.push('/router')"
            >返回首页</n-button
          >
        </n-space>
      </div>
      <div class="right">
        <n-space justify="space-between">
          <div>矩阵编号：{{ matrixId < 0 ? '暂未选择' : matrixId }}</div>
          <!-- <div style="margin-top: -10px">
            矩阵视图：
            <n-radio-group v-model:value="checkedValue">
              <n-radio-button value="32" :key="32"> 32*32 </n-radio-button>
              <n-radio-button value="4" :key="4"> 4*4 </n-radio-button>
            </n-radio-group>
          </div> -->
        </n-space>
        <n-space justify="center" style="margin-top: 10px">
          <n-input
            type="textarea"
            class="matrix"
            placeholder="矩阵"
            v-model:value="matrixValue"
          ></n-input>
        </n-space>
        <n-data-table
          ref="table"
          :columns="columns"
          :data="tmpData"
          :max-height="150"
          style="margin-top: 50px"
          :row-props="rowProps"
          :loading="loading"
        >
        </n-data-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import HeadBar from '@components/Head.vue';

import { CodeSlash, Search, Settings as SettingIcon } from '@vicons/ionicons5';

const matrixId = ref(-1);
const setting = ref(false);
const checkedValue = ref('32');
const select1 = ref(1);
const items1 = [
  {
    value: 1,
    label: 'Toeplitz矩阵构造方法',
  },
  {
    value: 2,
    label: '对合矩阵构造方法',
  },
  {
    value: 3,
    label: '循环矩阵构造方法',
  },
];

const select2 = ref(16);
const items2 = [
  {
    value: 16,
    label: 'GF(2, 4)',
  },
  {
    value: 32,
    label: 'GF(2, 8)',
  },
];

const select3 = ref(1000);
const items3 = [
  {
    value: 1000,
    label: '无限制',
  },
  {
    value: 40,
    label: '40',
  },
  {
    value: 60,
    label: '60',
  },
  {
    value: 80,
    label: '80',
  },
];
const height = computed(() => {
  return (50 / (select3.value + 3)).toString() + 'vh';
});

const table = ref(null);
const filter = () => {
  tmpData.value = data.value;
  tmpData.value = tmpData.value.filter((value) => {
    return value.xors < select3.value;
  });
};
import { h } from 'vue';
const columns = [
  {
    title: '矩阵序号',
    key: 'mId',
    defaultSortOrder: 'ascend',
    align: 'center',
    render(row, index) {
      return h('span', [index + 1]);
    },
  },
  //   {
  //   title: '矩阵序号',
  //   key: 'mId',
  //   defaultSortOrder: 'ascend',
  //   sorter: 'default',
  //   align: 'center',
  // },
  {
    title: '矩阵异或数',
    key: 'xors',
    sorter: (row1, row2) => row1.xors - row2.xors,
    align: 'center',
  },
  {
    title: 'Hamming重量',
    key: 'hammingWeight',
    sorter: (row1, row2) => row1.hammingWeight - row2.hammingWeight,
    align: 'center',
  },
  // {
  //   title: '是否对合',
  //   key: 'duihe',
  //   sorter: (row1, row2) => {
  //     let index1 = row1.duihe === '是' ? 1 : 0;a
  //     let index2 = row2.duihe === '是' ? 1 : 0;
  //     return index1 - index2;
  //   },
  // },
];

const data = ref([
  {
    mId: 3,
    hammingWeight: 32,
    xors: 10,
    duihe: '是',
  },
  {
    mId: 1,
    hammingWeight: 11,
    xors: 100,
    duihe: '是',
  },
  {
    mId: 2,
    hammingWeight: 22,
    xors: 50,
    duihe: '是',
  },
]);

const tmpData = ref([
  {
    mId: 3,
    hammingWeight: 32,
    xors: 10,
    duihe: '是',
  },
  {
    mId: 1,
    hammingWeight: 11,
    xors: 100,
    duihe: '是',
  },
  {
    mId: 2,
    hammingWeight: 22,
    xors: 50,
    duihe: '是',
  },
]);

import { useLoadingBar } from 'naive-ui';
const loadingBar = useLoadingBar();
const loading = ref(false);
// import { Example } from '@/api/example';
// 生成矩阵
import { Example } from '@/api/example';
const createM = () => {
  console.log(select2.value);
  loading.value = true;
  loadingBar.start();
  Example.search({
    method: select1.value,
    type: select2.value,
  }).then((res) => {
    console.log(res);
    if (res.data.status === 200) {
      console.log(res.data.array);
      data.value = res.data.data.array;
      filter();
      console.log('data', data.value);
      changeMatrix(data.value[0].mId);
      loadingBar.finish();
    } else {
      loadingBar.error();
    }
    loading.value = false;
    // console.log(JSON.eval(res.data))
    // data.value = res.data;
  });
};

const rowProps = (row: any) => {
  return {
    style: 'cursor:pointer',
    onClick: () => {
      changeMatrix(row.mId);
    },
  };
};
const changeMatrix = (id: number) => {
  let tmp = null;
  try {
    data.value.forEach((m) => {
      console.log(1);
      if (m.mId == id) {
        tmp = m;
        matrixValue.value = tmp.elements;
        matrixId.value = id;
        throw Error();
      }
    });
  } catch (e) {}
};
const matrixValue = ref('');
</script>

<style scoped>
.content {
  margin: 30px 50px 0 120px;
  display: flex;
  justify-content: space-around;
}
.left {
  margin-top: 40px;
  width: 450px;
  height: 400px;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}
.right {
  width: 700px;
  height: 400px;
  display: flex;
  flex-flow: column;
}
.title {
  height: 40px;
  width: 200px;
  color: white;
  background-color: rgb(92, 170, 243);
}
.btn {
  color: white;
  background-color: rgb(92, 170, 243);
  height: 40px;
  width: 150px;
  border-radius: 12px;
}
.select {
  width: 250px;
}
:deep(.n-base-selection) .n-base-selection-label {
  height: 40px !important;
}
.matrix {
  background-color: #f1f1f1;
  width: 700px;
  height: 200px;
}
:deep(.n-data-table) .n-data-table-td {
  padding: 6px;
}
:deep(.n-radio-group).n-radio-group--button-group .n-radio-button {
  width: 100px;
  text-align: center;
}
</style>
